{% load i18n %}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/css/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="/static/css/print.css" type="text/css" media="print">
    <!--[if IE]>
      <link rel="stylesheet" href="/static/css/ie.css" type="text/css" media="screen, projection">
    <![endif]-->
    <link rel="stylesheet" href="/static/css/style.css" type="text/css" media="screen, projection">
    
    <script src="/static/js/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="/static/js/jquery.pager.js" type="text/javascript"></script>
    
    <title>Cool Magic Box</title>
  </head>
  <body>

    <div id="container" class="container">
      <div id="header">
	    <h1><a href="/">Cool Magic Box</a></h1>
		<p><em>A small magic box that you cannot image....</em></p>
	  </div>
	  
	  <div class="clear"></div>

      <div id="menu">
	    <ul>
			<li class="current_page_item"><a href="/" class="first">Home</a></li>
			<!--<li><a href="#">Inbox</a></li>-->
			<li><a href="/outbox">Outbox</a></li>
			<li><a href="/setting">Setting</a></li>
		</ul>

	  </div>
	  
	  <div class="clear"></div>

      {% block content %}
      {% endblock %}	 

      <div class="clear"></div>	  

      <div id="footer">
	    <p>Copyright © 2011 Vertebrate. All Rights Reserved. Designed by <a href="">Spidersns</a>.</p>
	  </div>
    </div>

  </body>
</html>